<template>
    <div style="height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #c7ece8;box-shadow: 0 0 10px rgba(0,5, 0,.1 )">
        <div style="display: flex; width: 60%;border-radius: 10px; overflow: hidden;background-color: #fff;">
            <div style="flex: 0.9;">
                <img src="@/assets/login2.jpg" alt="logoin" style="width: 85%;">
            </div>

            <div style="flex: 0.7;display: flex; align-items: center;">
                <el-form :model="user" style="width: 80%;">
                    <div class="title" style="font-size: 24px; font-weight: bold; text-align: center;">欢迎来到健康管理系统</div>
                    <el-form-item prop="account">
                        <el-input prefix-icon="el-icon-user" size="medium" v-model="user.account" placeholder="请输入账号" ></el-input>
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input prefix-icon="el-icon-lock" size="medium" show-password v-model="user.password" type="password" placeholder="请输入密码"></el-input>
                    </el-form-item>

                    <el-form-item prop="validate">
                        <div style="display: flex;">
                            <el-input prefix-icon="el-icon-circle-check" size="medium" placeholder="请输入验证码" style="flex: 1;" v-model="code"></el-input>
                            <div style="flex:1;height: 36px;">
                                <valid-code @update:value="getCode" />
                            </div>
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" style="width: 100%;" size="medium" @click="login">登录</el-button>
                    </el-form-item>

                    <div class="login-bottom-row" style="display: flex;">
                        <div style="flex: 1;">还没有账号？<span style="color: #409eff; cursor: pointer;">立即注册</span></div> 
                        <div style="flex: 1; text-align: right;">忘记密码？<span style="color: #409eff; cursor: pointer;">找回密码</span></div>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import ValidCode from '@/components/ValidCode.vue';


export default {
    name: 'Login',
    components: {
        ValidCode
    },
    data(){
        return{
            code: '',
            user: {
                code: '',
                account: '',
                password: ''
            }
        }
    },
    methods:{
        getCode(code) {
            console.log(code)
            this.code=code
        },
        login(){
            console.log(this.user);
        }
    },
    created(){

    }
}
</script>
<style scoped>
.el-form-item {
  margin-bottom: 30px;
}
.login-bottom-row {
  margin-top: 30px;
}
.title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px;
}
</style>